<div
  class="{{class | default: 'custom_nav nav_type1'}}"
  id="{{id | default: 'custom_nav'}}"
  style="--menu-color:{{menu_color}};--height: {{height}};--bg: {{bg_color}};">
  <ul>
    {% if header_nav.size > 0 %}
      {% for item in header_nav.nav_item %}
        <li class="nav-li">
          {% if item.children %}
            <span>
              <a
                class="nav-li-a"
                style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
                target="{{item.setting_json.open | default : '_self' }}"
                {% if item.setting_json.model != 1 %}
                rel="external nofollow"
                {% endif %}
                href="{{item.url_json.url | default:'javascript:void(0)' }}">
                {% if item.src %}
                  <header-nav-img>{% include 'lazy_img', src: item.src, alt: '' %}{{ item.nav_item_name }}</header-nav-img>
                {% else %}
                  {{ item.nav_item_name }}
                {% endif %}
              </a>
            </span>

            <div class="nav-child">
              <div class="nav_container_wrapper">
                {% for el in item.children %}
                  {% if el.children %}
                    <dl>
                      <dt>
                        <a
                          style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};"
                          target="{{el.setting_json.open | default : '_self' }}"
                          {% if el.setting_json.model != 1 %}
                          rel="external nofollow"
                          {% endif %}
                          href="{{el.url_json.url | default:'javascript:void(0)' }}">
                          {% if el.src %}
                            <header-nav-img>{% include 'lazy_img', src: el.src, alt: '' %}{{ el.nav_item_name }}</header-nav-img>
                          {% else %}
                            {{ el.nav_item_name }}
                          {% endif %}
                        </a>
                      </dt>
                      {% for ddItem in el.children %}
                        <dd>
                          <a
                            style="color:{{ddItem.setting_json.color}};font-style:{{ddItem.setting_json.style}};font-weight:{{ddItem.setting_json.bold}};text-decoration:{{ddItem.setting_json.decoration}};"
                            target="{{ddItem.setting_json.open | default : '_self' }}"
                            {% if ddItem.setting_json.model != 1 %}
                            rel="external nofollow"
                            {% endif %}
                            href="{{ddItem.url_json.url | default:'javascript:void(0)' }}">
                            {% if ddItem.src %}
                              <header-nav-img>{% include 'lazy_img', src: ddItem.src, alt: '' %}{{ ddItem.nav_item_name }}</header-nav-img>
                            {% else %}
                              {{ ddItem.nav_item_name }}
                            {% endif %}
                          </a>
                        </dd>
                      {% endfor %}
                    </dl>
                  {% else %}
                    <dl>
                      <dt>
                        <a
                          style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};"
                          target="{{el.setting_json.open | default : '_self' }}"
                          {% if el.setting_json.model != 1 %}
                          rel="external nofollow"
                          {% endif %}
                          href="{{el.url_json.url | default:'javascript:void(0)' }}">
                          {% if el.src %}
                            <header-nav-img>{% include 'lazy_img', src: el.src, alt: '' %}{{ el.nav_item_name }}</header-nav-img>
                          {% else %}
                            {{ el.nav_item_name }}
                          {% endif %}
                        </a>
                      </dt>
                    </dl>
                  {% endif %}
                {% endfor %}
              </div>

            </div>
          {% else %}
            <span>
              <a
                class="nav-li-a"
                style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
                target="{{item.setting_json.open | default : '_self' }}"
                {% if item.setting_json.model != 1 %}
                rel="external nofollow"
                {% endif %}
                href="{{item.url_json.url | default:'javascript:void(0)' }}">
                {% if item.src %}
                  <header-nav-img>{% include 'lazy_img', src: item.src, alt: '' %}{{ item.nav_item_name }}</header-nav-img>
                {% else %}
                  {{ item.nav_item_name }}
                {% endif %}
              </a>
            </span>
          {% endif %}
        </li>
      {% endfor %}

    {% else %}
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Home</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Woman</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">New</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Tops</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Dresses</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Sale</a>
        </span>
      </li>
    {% endif %}
  </ul>
</div>